<!-- 系统状态概览 -->systemStatusList
<template>
  <div class="wrap">
    <span class="title">系统状态概览</span>
    <div class="main">
      <el-row :gutter="3">
        <el-col  :span="8"><div class="coldiv left">设备授权</div></el-col>
        <el-col :span="16"><div class="coldiv">{{list.CorpName}}</div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">授权有效期</div></el-col>
        <el-col :span="16">
          <div class="coldiv">{{list.ValidTime}}
            <span v-show="list.Days > 30" style="margin-left:10px; color:#67C23A;">({{list.Days}}天)</span>
            <span v-show="list.Days <= 30 && list.Days > 7" style="margin-left:10px; color:#E6A23C;">({{list.Days}}天)</span>
            <span v-show="list.Days <= 7 && list.Days > 0" style="margin-left:10px; color:#F56C6C;">({{list.Days}}天)</span>
            <span v-show="list.Days <= 0" style="margin-left:10px; color:#909399;">(已过期)</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">有线地址</div></el-col>
        <el-col :span="16"><div class="coldiv"><svg-icon :icon-class="list.EthStatus === 1 ? 'wangkaup' : 'wangkadown'" style="margin-right:10px;"/>{{list.EthStatus === 1 ? list.EthIP : '未连接'}}</div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">无线地址</div></el-col>
        <el-col :span="16"><div class="coldiv"><svg-icon :icon-class="list.WifiStatus === 1 ? 'wangkaup' : 'wangkadown'" style="margin-right:10px;"/>{{list.WifiStatus === 1 ? list.WifiIP : '未连接'}}</div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">连续运行</div></el-col>
        <el-col :span="16"><div class="coldiv hasprogress">{{list.KeepRunningSeconds}}<el-button @click="condition()" size="mini" style="margin-left: 20px;">运行状态</el-button></div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">设备时间</div></el-col>
        <el-col :span="16"><div class="coldiv">{{list.CurrentTime}}</div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">温度</div></el-col>
        <el-col :span="16"><div class="coldiv">{{list.Temperature === 0 ? '--' : list.Temperature/10 + '℃'}}</div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">系统磁盘</div></el-col>
        <el-col :span="16"><div class="coldiv hasprogress"><el-progress :stroke-width="10" :percentage="list.DiskUsedPct"></el-progress>{{(list.DiskUsed_Sys/1000000).toFixed(1) + 'GB'}}/{{(list.DiskTotal_Sys/1000000).toFixed(1) + 'GB'}}</div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">CPU使用率</div></el-col>
        <el-col :span="16"><div class="coldiv hasprogress"><el-progress :stroke-width="10" :percentage="list.CPURate"></el-progress></div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">内存使用</div></el-col>
        <el-col :span="16"><div class="coldiv hasprogress"><el-progress :stroke-width="10" :percentage="list.MemUsedPct"></el-progress>{{list.MemUsed}}/{{list.MemTotal}}</div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">版本号</div></el-col>
        <el-col :span="16"><div class="coldiv">{{list.Version}}</div></el-col>
      </el-row>
    </div>
    <el-dialog v-el-drag-dialog title="运行状态" :close-on-press-escape=false :visible.sync="dialogTableVisible" width="80%">
      <el-table :data="runList" stripe border>
        <el-table-column type="index" prop="序号"></el-table-column>
        <el-table-column property="proc" label="组件名称" align="center"></el-table-column>
        <el-table-column property="version" label="组件版本"  align="center"></el-table-column>
        <el-table-column property="pid" label="进程ID"  align="center"></el-table-column>
        <el-table-column property="update_time" label="最近活跃时间" align="center">
          <template slot-scope="scope">
            <span :style="(scope.row.update_time.indexOf('刚刚')||scope.row.update_time.indexOf('秒前'))?'color:#13ce66':'color:red'">{{scope.row.update_time}}</span>
          </template>
        </el-table-column>
        <el-table-column property="cpu" label="组件使用CPU" align="center"></el-table-column>
        <el-table-column property="mem" label="组件占用内存" align="center"></el-table-column>
        <el-table-column property="md5" label="组件MD5" align="center" width="350px"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import systemChart from './systemChart'
import { connrequest } from '@/api/firstPage.js'
import { parseTime, formatTime } from '@/utils/index.js'
export default {
  directives: { elDragDialog },
  components: {systemChart},
  props:{
    list:{
      type:Object
    }
  },
  data() {
  return {
    dialogTableVisible: false,
    Days: '',
    runList:[],
    list:{}
  }
},
//生命周期 - 创建完成（访问当前this实例）
created() {
  // this.getData()
  console.log();
},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {
  // this.Days = Math.floor((list.ValidTime*1000 - now) / 86400 / 1000)
},
methods: {
  // async getData(){
  //   const res = await connrequest('GetFirstPage')
  //   let d = Math.floor(res.Data.KeepRunningSeconds / 3600 / 24);
  //   let h = Math.floor((res.Data.KeepRunningSeconds  % 86400) / 3600);
  //   var m = Math.floor(((res.Data.KeepRunningSeconds % 86400) % 3600) / 60);
  //   res.Data.KeepRunningSeconds = `${d < 1 ? '' : d}${d < 1 ? '' : '天'} ${h}小时 ${m}分钟`;
  //   res.Data.EthIP = res.Data.EthIP ? res.Data.EthIP : '接口无效'
  //   res.Data.WifiIP = res.Data.WifiIP ? res.Data.WifiIP : '接口无效'
  //   let now = new Date().getTime()
  //   // this.Days = this.dateTrans(res.Data.ValidTime*1000 - now)
  //   this.Days = Math.floor((res.Data.ValidTime*1000 - now) / 86400 / 1000)
  //   res.Data.ValidTime = parseTime(res.Data.ValidTime, '{y}-{m}-{d}')
  //   res.Data.CurrentTime = parseTime(res.Data.CurrentTime)
  //   res.Data.MemUsedPct = ((res.Data.MemUsed / res.Data.MemTotal) * 100).toFixed(1) * 1
  //   res.Data.MemUsed = (res.Data.MemUsed / 1000000).toFixed(2) + 'G'
  //   res.Data.MemTotal = (res.Data.MemTotal / 1000000).toFixed() + 'G'
  //   res.Data.DiskUsedPct = ((res.Data.DiskUsed / res.Data.DiskTotal) * 100).toFixed(1) * 1
  //   res.Data.DiskUsed = (res.Data.DiskUsed / 1000000).toFixed(2) + 'G'
  //   res.Data.DiskTotal = (res.Data.DiskTotal / 1000000).toFixed(0) + 'G'
  //   this.list = {...res.Data}
  // },
  dateTrans(date) {
    let computeTime = date / 1000
    let year = Math.floor(computeTime / 86400 / 365);
    computeTime = computeTime % (86400 * 365);
    let month = Math.floor(computeTime / 86400 / 30);
    computeTime = computeTime % (86400 * 30);
    let day = Math.floor(computeTime / 86400);
    computeTime = computeTime  % 86400;
    return `${year > 0 ? year + '年' : ''}${month > 0 ? month + '月' : ''}${day}天`;
  },
  async condition(){
    this.runList = []
    const res = await connrequest('GetWatchDog')
    if (res.Status.StatusCode === 0) {
      // formatTime
      for (const key in res.Data) {
        // switch (res.Data[key].proc) {
        //   case 'agent_stream':
        //     res.Data[key].proc = '流量探测组件'
        //     break;
        //   case 'agent_sync_param':
        //     res.Data[key].proc = '核心加速组件'
        //     break;
        //   case 'autodel_corp':
        //     res.Data[key].proc = '数据管理组件'
        //     break;
        //   case 'agent_email':
        //     res.Data[key].proc = '邮件任务组件'
        //     break;
        //   default:
        //     res.Data[key].proc = '在线维护组件'
        //     break;
        // }
        res.Data[key].cpu = res.Data[key].cpu + '%'
        res.Data[key].mem = res.Data[key].mem > 1000 ? (res.Data[key].mem / 1000).toFixed(2)+ 'M' : res.Data[key].mem + 'K'
        res.Data[key].update_time = formatTime(new Date(res.Data[key].update_time))
        this.runList.push(res.Data[key])
      }
      this.dialogTableVisible = true;
    }
  }
}
}
</script>
<style scoped lang='scss'>
.wrap {
  height:370px;
  overflow: hidden;
  ::v-deep .main{
    margin-top: 15px;
    font-size: 14px;
    .el-col{
      .coldiv{
        height: 28px;
        line-height: 28px;
        padding-left: 10px;
        margin-bottom: 3px;
        border: 1px solid #E6EAEE;
        white-space: nowrap;
        .el-progress{
          display: inline-block;
          width: 120px !important;
        }
        .el-progress__text{
          font-size: 14px !important;
        }
      }
      .hasprogress{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 10px;
      }
    }
    .left{
      background: #eff3f6;
      text-align: right;
      padding-right: 10px;
    }
  }
}
</style>